<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <link rel="stylesheet" href="/admin/css/pintuer.css"/>
     <link rel="stylesheet" href="/admin/css/admin.css"/>
     <link  href="/admin/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
     <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
     <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/admin/js/pintuer.js"></script>
     <script type="text/javascript" charset="utf-8">
         function getXHR() {//返回XMLHttpRequest
             if(window.XMLHttpRequest) {//W3C标准的浏览器获取
                 return new XMLHttpRequest();
             } else {//ie浏览器适配
                 return new window.ActiveXObject("Microsoft.XMLHTTP");
             }
         }
         // document.write(getXHR());
     </script>
</head>
<body>
<form method="get" action="/admin/film/index">
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 电影管理</strong></div>
    <div class="padding border-bottom">

      <ul class="search">
        <li>
                <input type="text" name="key" class="form-control" placeholder="添加电影名称查找">
                <button class="btn btn-success">查询</button>
        </li>
        <li>
          <a class="button border-green" href="/admin/film/add" ><span class="icon-edit"></span> 添加</a>
        </li>
      </ul>

    </div>
    <table class="table table-hover text-center">
        <thead>
            <tr>
                <th>编号.</th>
                <th>电影名称</th>
                <th>上映年份</th>
                <th>时长</th>
                <th>国家</th>
                <th>语言</th>
                <th>分类</th>
                <th>剧情</th>
                <!-- <th>是否前台显示</th> -->
                <th>操作</th>
            </tr>
        </thead>
     <tbody>
     <tr th:each="film:${page.records}" th:object="${film}">
         <td th:text="*{id}"></td>
         <td th:text="*{name}"></td>
         <td th:text="*{#dates.format(releaseTime,'yyyy-MM-dd')}"></td>
         <td th:text="*{length}"></td>
         <td th:text="*{country}"></td>
         <td th:text="*{language}"></td>
         <td th:text="*{type}"></td>
         <td>
             <p class="hide" th:text="*{plot}"></p>
             <a class="btn btn-info" data-toggle="modal" data-target="#myModal" onclick="showBI(this);">电影简介</a>
         </td>
         <td>
             <a class="btn btn-warning" th:href="|/admin/film/update?id=*{id}|"><span class="glyphicon glyphicon-edit">编辑</span></a>
             <a class="btn btn-info" th:href="|/admin/film/cast-member/*{id}|"><span class="inco-info">编辑演职人员</span></a>
         </td>
<!--         <td th:text="">*{}</td>-->
     </tr>
     </tbody>
      <tr>
        <td colspan="8">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li style="border: none">
                        <a th:href="|/admin/film/index?pn=${page.current-1}|" aria-label="Previous" th:if="${page.current>1}">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li style="border: none" th:class="${pn==page.current?'active':''}" th:each="pn:${#numbers.sequence(1,page.pages)}">
<!--                        <a th:href="|/admin/film/index?pn=${pn}|" th:text="${pn}">1</a></li>-->
                        <a th:href="'/admin/film/index?pn='+${pn}" th:text="${pn}">1</a></li>
                    <li style="border: none">
                        <a th:href="|/admin/film/index?pn=${page.current+1}|" aria-label="Next" th:if="${page.current<page.pages}">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
		</td>
      </tr>

    </table>
  </div>
</form>
<script type="text/javascript">
    function showBI(element){
        let briefIntro = $(element).prev().text();
        $("#myModal .modal-body p").text(briefIntro);
    }
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                <h4 class="modal-title" id="myModalLabel">电影剧情</h4>
            </div>
            <div class="modal-body">
                <p>未显示</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
            </div>
        </div>
    </div>
</div>

</body></html>